<template>
  <transition name="fade">
    <div class="xrk-datetime-picker" v-show="visible">
      <transition name="upDown">
        <div class="picker-content" v-show="visible">
          <div class="picker-header">
            <span class="cancel" @click="onCancel">取消</span>
            <span class="select-time">选择年月日</span>
            <span confirm @click="OnConfirm">确认</span>
          </div>
          <div class="picker-main">
            <column
              :dateList="years"
              :currentDate="currentYear"
              type="currentYear"
              @changeDate="changeDate"
            ></column>
            <column
              :dateList="months"
              :currentDate="currentMonth"
              type="currentMonth"
              @changeDate="changeDate"
            ></column>
            <column
              :dateList="days"
              :currentDate="currentDay"
              type="currentDay"
              @changeDate="changeDate"
            ></column>
            <div class="picker-mask"></div>
            <div class="picker-frame"></div>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import column from "./components/column.vue";
import { getDefaultDate, transformNumberToArray } from "./utils";
export default {
  name: "datetimePicker",
  components: {
    column,
  },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    currentDate: {
      type: String,
      default: getDefaultDate(),
    },
    minDate: {
      // 最小日期默认为当前日期往前20年
      type: Date,
      default: () => {
        let date = new Date();
        return new Date(
          date.getFullYear() - 20,
          date.getMonth(),
          date.getDate()
        );
      },
    },
    maxDate: {
      // 最大日期默认为今天
      type: Date,
      default: () => new Date(),
    },
    value: {
      type: [String,Number],
    },
    formatter: {
      type: Function,
    },
  },
  data() {
    return {
      time: this.currentDate.split("-"),
    };
  },
  computed: {
    currentYear: {
      // 当前选中的年份
      get() {
        return Number(this.time[0]);
      },
      set(newVal) {
        this.time.splice(0, 1, newVal);
      },
    },
    currentMonth: {
      // 当前选中的月份
      get() {
        return Number(this.time[1]);
      },
      set(newVal) {
        this.time.splice(1, 1, newVal);
      },
    },
    currentDay: {
      // 当前选中的日
      get() {
        return Number(this.time[2]);
      },
      set(newVal) {
        this.time.splice(2, 1, newVal);
      },
    },
    days() {
      // 可选择的日 一共几号到几号~
      let year = this.currentYear;
      let month = this.currentMonth;
      let isLeapYear = false;
      let Day = 30;
      let minDay = 1;
      // 判断闰年
      if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        isLeapYear = true;
      }
      // 判断闰月
      if (month === 2) {
        isLeapYear ? (Day = 29) : (Day = 28);
      }
      // 判断大小月
      let maxMonth = [1, 3, 5, 7, 8, 10, 12];
      if (maxMonth.includes(month)) {
        Day = 31;
      }
      // 判断是否超出最大,最小可选日期
      if (
        year === this.maxDate.getFullYear() &&
        month === this.maxDate.getMonth() + 1
      ) {
        Day = this.maxDate.getDate();
      } else if (
        year === this.minDate.getFullYear() &&
        month === this.minDate.getMonth() + 1
      ) {
        minDay = this.minDate.getDate();
      }
      return transformNumberToArray(minDay, Day);
    },
    months() {
      // 可选择的月 一共几月到几月~
      let minMonth = 1;
      let MaxMonth = 12;
      if (this.currentYear === this.maxDate.getFullYear()) {
        MaxMonth = this.maxDate.getMonth() + 1;
      } else if (this.currentYear === this.minDate.getFullYear()) {
        minMonth = this.minDate.getMonth() + 1;
      }
      return transformNumberToArray(minMonth, MaxMonth);
    },
    years() {
      // 可选择的年 一共几年到几年~
      return transformNumberToArray(
        this.minDate.getFullYear(),
        this.maxDate.getFullYear()
      );
    },
  },
  methods: {
    onCancel() {
      this.$emit("cancel", !this.visible);
    },
    OnConfirm() {
      if (!this.formatter) {
        let month =
          this.currentMonth >= 10 ? this.currentMonth : "0" + this.currentMonth;
        let day =
          this.currentDay >= 10 ? this.currentDay : "0" + this.currentDay;
        let rusult = this.currentYear + "-" + month + "-" + day;
        this.$emit("change", rusult);
      } else {
        let rusult = this.formatter(
          this.currentYear,
          this.currentMonth,
          this.currentDay
        );
        this.$emit("change", rusult);
      }
      this.$emit("cancel", !this.visible);
    },
    changeDate(val, type) {
      this[type] = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.upDown-enter {
  transform: translateY(100%);
}
.upDown-enter-active,
.upDown-leave-active {
  transition: all 0.5s;
}

.upDown-leave-to {
  transform: translateY(100%);
}

.xrk-datetime-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(51, 51, 51, 0.75);
  z-index: 999;
  .picker-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 264px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    background-color: #fff;
    overflow: hidden;
  }
}

.picker-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 14px;
  flex-shrink: 0;
  .cancel {
    color: #969799;
  }
  .confirm {
    color: #576b95;
  }
  .select-time {
    font-size: 16px;
    font-weight: 500;
  }
}

.picker-main {
  position: relative;
  display: flex;
  height: 100%;
  .picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 220px;
    background-image: linear-gradient(#fff, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }
  .picker-frame {
    position: absolute;
    top: 88px;
    left: 16px;
    right: 16px;
    height: 44px;
    border-top: 1px solid #ebedf0;
    border-bottom: 1px solid #ebedf0;
    box-sizing: border-box;
    pointer-events: none;
  }
}
</style>